<template>

  <!-- 档案 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="height:84vh;width: 20vw"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <switch-bar :list="barListLeft" v-model="barModelLeft" @change="barChangeLeft"></switch-bar>

      <el-scrollbar class="tree_scroll">
        <h6 class="l_title-s">{{currentItemLeft.name}}</h6>
        <div class="card-num-box" v-if="barModelLeft === '区间总数'">
          <number-scroll :number="currentItemLeft.num ? currentItemLeft.num : 0"></number-scroll>
        </div>
        <div class='left-li common_card-bk' v-for="item in currentItemLeft.itemList || []" :key="item.name">
          <div class="card-num-box" v-if="item.name === '路线类型统计'">
            <p class="title3"> {{roadCountNum.name}}</p>
            <number-scroll :number="roadCountNum.count ? roadCountNum.count : 0"></number-scroll>
          </div>
          <div class="card-num-box" v-if="item.name === '管养里程统计'">
            <p class="title3"> {{roadCountKm.name}}</p>
            <number-scroll :number="roadCountKm.count ? roadCountKm.count : 0"></number-scroll>
          </div>
          <div class='left-li-top'>
            <p class='left-li-top-title'>
              <img v-if="item.name === '路线类型统计'" src='../imgs/jg_lxlx.png'>
              <img v-if="item.name === '管养里程统计'" src='../imgs/jg_lxlx.png'>
              <img v-if="item.name === '面层类型'" src='../imgs/jg_mclx.png'>
              <img v-if="item.name === '抗震设防等级'" src='../imgs/jg_kz.png'>
              <img v-if="item.name === '防洪标准'" src='../imgs/jg_fhbz.png'>
              {{item.name}}
            </p>
            <p class='float-right left-li-title-right' v-if="item.name !== '管养里程统计' && item.name !== '路线类型统计'">
              <span class='num1 color2'>
                <number-change
                  :number="item.itemList ? item.itemList.reduce((prev, cur) => prev + cur.num, 0) : item.num"></number-change>
              </span> {{item.name === '管养里程统计' ?'Km':'条'}}
            </p>
          </div>
          <ul class="left-li-bottom">
            <li v-for="child in item.itemList || []" :key="child.name"
                :style="`${item.name === '抗震设防等级' ? `width:${49}%;text-align:left;height:35px` : `width:${49}%;text-align:left;height:35px`}`">
              {{child.name}}
              <span class="num2 color3">
                <number-change :number="child.num"></number-change>
              </span> {{item.name === '管养里程统计' ?'Km':'条'}}
            </li>
          </ul>

        </div>
      </el-scrollbar>
    </dv-border-box-13>
    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="height:84vh;width: 20vw"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <switch-bar :list="barListRight" v-model="barModelRight" @change="barChangeRight"></switch-bar>
      <div v-if="barModelRight=='边坡风险等级'">
        <h6 class="l_title-s">技术状况评定等级统计</h6>
        <div class="assess_total">

          <div style="justify-content: flex-start" :class="item.name=='未进行风险评估'?'width96':'width48'" v-for="item in currentItemRight.itemList" :key="item.name">
            <div @click="onChange(item)" :class="currentActive === item.name ? 'init_button_is' : 'init_button'" >
              <el-row style="display: flex;align-items: center;justify-content: center;height:3vw">
                <el-col span="14" style="text-align: center">
                  <img style="width:2.5rem;" v-if="item.name=='未进行风险评估'" src='../imgs/00.png'>
                  <img style="width: 2.5rem;" v-else-if="item.name=='I级'" src='../imgs/1.png'>
                  <img style="width: 2.5rem;" v-else-if="item.name=='II级'" src='../imgs/2.png'>
                  <img style="width: 2.5rem;" v-else-if="item.name=='III级'" src='../imgs/3.png'>
                  <img style="width: 2.5rem;" v-else-if="item.name=='IV级'" src='../imgs/4.png'>
                </el-col>
                <el-col span="14" style="">
                  <p style="color: white;margin: 4% 0;width: 90%">{{item.name}}</p>
                  <p style="color: #c600ff;" v-if="item.name=='未进行风险评估'">{{item.num}}</p>
                  <p style="color: #E43321" v-else-if="item.name=='I级'">{{item.num}}</p>
                  <p style="color: #FF851B" v-else-if="item.name=='II级'">{{item.num}}</p>
                  <p style="color: #0073B7" v-else-if="item.name=='III级'">{{item.num}}</p>
                  <p style="color: #0DC26B" v-else-if="item.name=='IV级'">{{item.num}}</p>
                </el-col>

              </el-row>

            </div>
          </div>
        </div>
        <dv-decoration-10 style="width:100%;height:5px;margin:24px 0"/>
        <h6 class="l_title-s">各路线{{currentActive}}边坡数量排行</h6>
        <div class="left_paihang">
          <dv-scroll-ranking-board :config="leftTableConfig" class="dv_table_left"/>
        </div>
      </div>
      <el-scrollbar v-else class="tree_scroll">
        <h6 class="l_title-s">{{currentItemRight.name}}</h6>
        <div class="card-num-box" v-if="barModelRight === '风险点总数'">
          <number-scroll :number="currentItemRight.num ? currentItemRight.num : 0"></number-scroll>
        </div>
        <div class='left-li common_card-bk' v-for="item in currentItemRight.itemList || []" :key="item.name">
          <div class="card-num-box" v-if="item.name === '边坡总数'">
            <p class="title3"> {{item.name}}</p>
            <number-scroll :number="item.num ? item.num : 0"></number-scroll>
          </div>
          <div class='left-li-top' v-show="barModelRight !=='边坡统计'">
            <p class='left-li-top-title'>
              <img v-if="item.name === '崩塌'" src='~@/assets/images/jg_zh_bt.png'>
              <img v-if="item.name === '滑坡'" src='~@/assets/images/jg_zh_hp.png'>
              <img v-if="item.name === '泥石流'" src='~@/assets/images/jg_zh_nsl.png'>
              <img v-if="item.name === '沉陷与塌陷'" src='~@/assets/images/jg_zh_cx.png'>
              <img v-if="item.name === '水毁'" src='~@/assets/images/jg_zh_sh.png'>
              {{item.name}}
            </p>
            <p class='float-right left-li-title-right'>
              <span class='num1 color2'>
                <number-change
                  :number="item.itemList ? item.itemList.reduce((prev, cur) => prev + cur.num, 0) : item.num"></number-change>
              </span> 个
            </p>
          </div>
          <div v-for="child in item.itemList || []" :key="child.name"
               v-show="item.name ==='边坡总数'">
            <div class='left-li-top' style="margin-top: 1rem">
              <h6 class="l_title-s" v-if="item.name === '边坡总数'" style="width: 50%;display: inline-block;font-size: 20px">
                {{child.name}}</h6>
              <p class='float-right left-li-title-right' style="display: inline-block;width: 33%;margin-top: 0.4rem">
              <span class='num1 color2'>
                <number-change style="font-size: 20px"
                               :number="child.num"></number-change>
              </span> 个
              </p>
            </div>
            <div v-if="item.name =='边坡总数'">
              <ul class="left-li-bottom">
                <li :style="`width:${49}%;text-align:left;height:25px`" v-for="child2 in child.itemList"
                    :key="child2.name">
                  {{child2.name}}
                  <span class="num2 color3">
                       <number-change :number="child2.num" style="font-size: 12px"></number-change>
                    </span> {{item.name === '管养里程统计' ?'Km':'个'}}
                </li>
              </ul>
            </div>

          </div>
        </div>
      </el-scrollbar>
    </dv-border-box-13>
  </div>
</template>

<script>
  import {archivesCount} from '@/services/model/data-board'
  import NumberChange from '../components/number-change.vue'
  import NumberScroll from '../components/number-scroll'
  import SwitchBar from '../components/switch-bar.vue'

  export default {
    components: {NumberChange, SwitchBar, NumberScroll},
    data() {
      return {
        currentActive: '',
        countList: [],
        showLoading: true,
        // 排查总数统计列表
        leftTotalList: [],
        currentItemLeft: {},
        currentItemRight: {},
        barModelLeft: '',
        barModelRight: '',
        barListLeft: [
          {
            name: '路线',
            code: '路线统计'
          },
          // {
          //   name: '区间',
          //   code: '区间总数'
          // }
        ],
        barListRight: [
          {
            name: '边坡统计',
            code: '边坡统计'
          },
          {
            name: '边坡风险等级',
            code: '边坡风险等级'
          },
        ],
        roadCountKm: {},
        roadCountNum: {},
        slopeCountHeight: {},
        leftTable: [],
      }
    },
    computed: {
      leftTableConfig() {

        return {
          data: this.leftTable.map(x => ({name: x.name, value: x.num})),
          rowNum:5,
        }
      }},
      methods: {
        // 类型切换
        onChange(item) {
          this.currentActive = item.name
          this.leftTable = item.itemList || []
          this.$emit('changeMap', item.code)
        },
        // bar改变
        barChangeLeft() {
          this.currentItemLeft = this.leftTotalList.find(x => x.name === this.barModelLeft) || {}
        },
        // bar改变
        barChangeRight() {
          this.currentItemRight = this.leftTotalList.find(x => x.name === this.barModelRight) || {}
          if (this.barModelRight == '边坡风险等级') {
            this.leftTable = this.currentItemRight.itemList[0].itemList
            this.currentActive= this.currentItemRight.itemList[0].name
          }
        },
        // 路线改变
        refresh(deptTreeId, roadId) {
          this.queryLeftTotal(deptTreeId, roadId)
          this.$emit('changeMap')
        },
        // 查询左边顶部的统计数据
        async queryLeftTotal(deptTreeId, roadId) {
          const {data} = await archivesCount({deptTreeId, roadId})
          this.leftTotalList = data || {}
          let roadCount = {
            name: '路线统计',
            itemList: data.filter(x => x.name === '路线类型统计' || x.name === '管养里程统计')
          }
          this.leftTotalList.push(roadCount)
          let slopeCount = {
            name: '边坡统计',
            itemList: data.filter(x => x.name === '边坡总数' || x.name === '边坡总高度')
          }
          this.leftTotalList.push(slopeCount)

          this.roadCountKm = {
            img: require('../imgs/list_icon_0.png'),
            name: '管养总里程(Km)',
            count: this.leftTotalList.find(x => x.name === '管养里程统计').num || 0,
            color: 'color3'
          }
          this.roadCountNum = {
            img: require('../imgs/list_icon_0.png'),
            name: '路线总数',
            count: this.leftTotalList.find(x => x.name === '路线类型统计').num || 0,
            color: 'color3'
          }
          this.slopeCountHeight = {
            img: require('../imgs/list_icon_1.png'),
            name: '边坡总高度(m)',
            count: this.leftTotalList.find(x => x.name === '边坡总数').num || 0,
            color: 'color1'
          }
          this.barModelLeft = this.leftTotalList[5]?.name
          this.barModelRight = this.leftTotalList[6]?.name
          this.barChangeLeft()
          this.barChangeRight()
          this.showLoading = false

        },
      },
      async mounted() {

      },
      activated() {
        if (this.$route.name === 'assess') {
          return
        }
        let deptTreeId = this.$route.params.deptTreeId
        let roadId = this.$route.params.roadId
        this.refresh(deptTreeId, roadId)
      }
    }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
.width48{
  width: 48%;

}.width96{
   width: 96%;

 }
  /deep/ .tree_scroll .el-scrollbar__wrap {
    height: 68vh;
  }

  .common_scrollbar {
    width: 100%;
    height: 100%;
  }

  .common_scrollbar /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
    margin-bottom: 0 !important;
  }

  .left_item {
    display: flex;
    align-items: center;
    cursor: pointer;

    img {
      width: 2.5rem /* 40/16 */;
      height: 2.5rem /* 40/16 */;
      margin-right: 1rem /* 16/16 */;
    }

    em {
      flex: 1;
      font-weight: 600;
      font-size: 1.125rem /* 18/16 */;
      line-height: 1.5625rem /* 25/16 */;
      letter-spacing: 0.125em;
      color: #D5E3E8;
    }

    & > span::after {
      margin-left: .25rem /* 4/16 */;
      /*content: '个';*/
      font-size: .75rem /* 12/16 */;
      line-height: 1.0625rem /* 17/16 */;
      color: #939EA3;
    }
  }

  .dv_table_left {
    margin-top: 0rem /* 24/16 */;
    width: 100%;
    height: 23vh;
  }
  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    align-items: center;
    justify-content: flex-start;
   padding-left: 1vw;
    box-sizing: border-box;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .left-li {
    position: relative;
    margin: 0.5rem;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 1.125rem;
  }

  .left-li .left-li-title-right {
    float: right;
    font-size: 0.75rem;
    color: #939EA3;
  }

  .left-li-bottom {
    flex-wrap: wrap;
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-between;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;

    &::before, &::after {
      content: " ";
      display: inline-block;
      width: 0.3rem;
      height: 0.3rem;
      background: #3A506A;
      position: absolute;
      top: -0.15rem;
      z-index: 2;
    }

    &::before {
      left: 0;
    }

    &::after {
      right: 0;
    }

    li {
      width: 50%;

      &:nth-child(even) {
        text-align: right;
      }
    }
  }

  .left-li .left-li-top-title img {
    width: 1.8rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .init_button {
    background-color: #1f2a48;
    border: 1px solid #353f61;
    color: #547aff;
  }

  .init_button_is {
    background-color: #34487f;
    border: 1px solid #353f61;
    color: #547aff;
  }
</style>
